<template>
  <div>
    <van-nav-bar title="地址信息" left-arrow :fixed="true" :z-index="9" :border="false" style="background-color: #f44;height: 50px;" @click-left="onClickLeft"/>
    <van-address-list v-model="chosenAddressId" :list="list" @add="onAdd" @edit="onEdit" style="margin-top: 51px;"/>
  </div>
</template>

<script>
export default {
  name: 'addressList',
  data () {
    return {
      chosenAddressId: '1',
      list: []
    }
  },
  methods: {
    /**
     * 根据用户openId获取其收货地址列表
     */
    getShopUserAddressListByOpenId (openId) {
      const self = this
      const param = { openId: openId }
      self.axios.get('api/shop/getShopUserAddressListByOpenId', { params: param }).then(resp => {
        if (resp.data.code !== '-1') {
          resp.data.data.forEach(item => {
            let obj = {}
            obj.id = item.id
            obj.name = item.receiveName
            obj.tel = item.receivePhone
            obj.province = item.province
            obj.city = item.city
            obj.county = item.county
            obj.areaCode = item.areaCode
            obj.address = item.address
            obj.postalCode = item.postalCode
            obj.isDefault = item.isDefault
            this.list.push(obj)
          })
        } else {
          self.$toast(resp.data.msg)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    onClickLeft () {
      this.$router.push('mine')
    },
    onAdd () {
      this.$router.push('addressEdit')
    },
    onEdit (item) {
      this.$router.push({ name: 'addressEdit', query: item })
    }
  },
  mounted () {
    const self = this
    // 获取当前用户openId
    let openId = self.$store.state.openId
    // 根据用户openId获取其收货地址列表
    self.getShopUserAddressListByOpenId(openId)
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar .van-icon {
  color: white;
  vertical-align: middle;
}

.van-nav-bar__title {
  color: white;
}
</style>
